DHTML Menu Builder Items
Commands

Every item contained within a group is a Menu Command.
You should see the menu commands as the options of a pulldown menu.

Each menu command can have its own particular properties such as font properties, text color, etcetera.
DHTML Menu Builder can have three different types of menu commands:

Once a menu command is created you must select a name for this item. The name should be a reference name.
For example, if this command is part of a list of items that are in sale, we could name it siTelephones.

Note the prefix in the name "si" stands for [s]ale[i]tems which is the name we gave the group where this command is listed.
It is a good practice to name groups and commands like this, but of course, you can use your own naming conventions that you're already used to. 

You should not use special characters such as double or single quotes, slashes, commas, spaces or any other character apart from letters and numbers.

Normal Menu Commands

These are the basic components of a pulldown.
With the menu commands you display the options of your menu, wait for an event triggered by the user that is navigating the menu and produce some action when the user activates one of the commands. You can load another page in the browser, you can display a message dialog, actually, you can do anything you could as if these commands where simply hyperlinks on a web page.

In the Caption property you must type the actual text that will be displayed in the compiled menu.
Following with our Sale Items sample, we should type here Telephones.

The font and color properties of this label can be set using the Style buttons explained bellow, but in order to achieve even higher levels of customization, you can use HTML tags in the Caption property, just as if you were formatting text on an HTML document. For example, lets say you want to add the label "Saturday, January 1st, 2000" . Notice how the "st" is superscripted. The HTML tag to do so is <sup>. So this is what you should type in the Caption text box: Saturday, January 1<sup>st</sup>, 2000

In the Action you should type the name of the document that you want to redirect the user when this command is activated. You can also insert simple JavaScript statements, such as javascript:alert('Hello World');. This will display a dialog box with the "Hello World" message on it!
But again, following with our sales sample, we would probably prefer to type the name of the document with our list of telephones, for example tels.html.

If you would like to prevent any interaction from the user with a command, just uncheck the Action checkbox. DHTML Menu Builder will compile this command just as the rest, but no action will be taken when the user moves the mouse over it, or clicks it.

On a project with frames support enabled, you will also have the option to choose the target frame where the link in the Action property should open.

The trigger event will let you choose what event should the menu system listen for in order to execute the statement specified in the Action filed. The default event for every newly created command is the Clicking event.

These are all the events you can choose from:

Event

Result

Hovering The command will be activated it when the mouse passes over the menu command.
Clicking The command will be activated it when the user clicks the menu command.

The Status Text property will let you type a small paragraph of text.
This text will be displayed on the browser's status bar when the mouse passes over the command. This can be very useful and should be used to type small description of what that particular menu command does or means.

Finally, the Style properties can be accessed using the style toolbar

With the Color properties dialog you can set the text and background color of the command at its normal state and when the mouse passes over it.
The Font properties dialog lets you specify the font type, size and style of the command at its normal state and when the mouse passes over it.
You can set the cursor shape of the mouse with the Cursor property dialog. The cursor will change its shape when the mouse passes over the command.

The cursor property is only supported by Internet Explorer 4.0 or above. The mouse cursor will change into the default pointer, the hand, when the mouse passes over any of the commands when the menus are viewed with Navigator or Internet Explorer 5 for the Macintosh.

Finally, the Image properties dialog lets you choose to display a small image at either side of the command, at its normal state and when the mouse passes over it.

Line Separators

These special items are used to separate commands in the same group. Only the line color can be customized for these items.
The compiled menu will display an horizontal line in the place where this item is placed.
If you don't want to use the integrated line separator generated by DHTML Menu Builder, you can create a command with no action (the Action property disabled) and type the HTML <hr> tag into the Caption property.

Cascade Menu Commands

These are special items in the menu commands collection and are used to display another pulldown when activated.
The Action is substituted for a list of available groups. Simply select a group from the list and whenever this command is activated the selected group will be displayed.


Some tips about the commands

In a common situation you may want to set the same color and font properties for every menu command under the same group, and usually, for the whole project.

The easiest way to accomplish such task on a large project is by setting the initial command properties on the group properties.
As you learned in the groups section, you can set the default color and font values at the moment you create a group, and such parameters will be adopted by every newly added command.

Some properties can not be set via the group properties dialogs. These properties, such as the image or cursor can be copied from a command to every other command under the same group using a single option. Simply set the parameters, color and font of a command and select Edit->Copy. This will display the Selective Copy dialog.
Check the properties you want to copy and click OK.
Now, select Edit->Paste and the Selective Paste dialog will show up. You can choose which properties to paste, by just checking the ones you want and set the domain of the paste operation by selecting to what command(s) you want to paste the properties on the clipboard. 

The copy and paste features of DHTML Menu Builder have been highly enhanced to accommodate the application needs. For more information you should take the tutorial where these features are explained in much more detail.